<template>
    <div class="main el-box-init el-bkgd-white el-mg-20 el-pd-20">
        <!-- 操作按钮 -->
        <el-row class="table-btn el-pd-b-20">
            <el-button
                type="primary"
                icon="el-icon-plus"
                :size="$btnSize"
                v-if="isAuth('BLOG_COLUMN_ADD')"
                @click="onAddOrUpdate()"
            >
                新增
            </el-button>
            <el-button
                type="warning"
                :size="$btnSize"
                v-if="isAuth('BLOG_COLUMN_UPDATE_SORT')"
                @click="onUpdateSort()"
            >
                更新排序
            </el-button>
        </el-row>

        <el-table
            v-loading="table.loading"
            :data="table.list"
            :size="$tableSize"
            stripe
            border
            ref="tableRef"
            :row-key="getRowKeys"
        >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>

            <el-table-column prop="title" label="栏目标题"></el-table-column>

            <el-table-column prop="name" label="栏目名称"></el-table-column>

            <el-table-column prop="path" label="路由URL"></el-table-column>

            <el-table-column prop="keyword" label="SEO关键词"></el-table-column>

            <el-table-column prop="desc" label="SEO描述"></el-table-column>

            <el-table-column prop="display" label="状态">
                <template slot-scope="{ row }">
                    <el-switch
                        v-model="row.display"
                        :active-value="1"
                        :inactive-value="0"
                        active-text="显示"
                        inactive-text="隐藏"
                        @change="onColumnDisplay(row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                :width="$defaultActionWidth"
                align="center"
                fixed="right"
            >
                <template slot-scope="{ row }">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        :size="$btnSize"
                        v-if="isAuth('BLOG_COLUMN_UPDATE')"
                        @click="onAddOrUpdate(row.id)"
                    >
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增、编辑 -->
        <dialog-add-or-update ref="addOrUpdate" :id="table.rowId" />
    </div>
</template>

<script>
import { tableMethodsMixins } from "@/global/utils/mixins";
import DialogAddOrUpdate from "./add-or-update.vue";
import { adminCloumn as Api } from "api";

export default {
    mixins: [tableMethodsMixins],
    components: {
        DialogAddOrUpdate,
    },
    data() {
        return {
            //表格
            table: {
                loading: false,
                rowId: 0,
                list: [],
                currentPage: this.$config.pagination.currentPage, // 默认页
                pageSize: this.$config.pagination.pageSize, // 每页多少条
                pageSizes: this.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: this.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总条数
            },

            // 回显选择过的列
            getRowKeys(row) {
                return row.id;
            },
        };
    },
    created() {
        this.getList().then(() => {
            this.rowDrop(); // 初始化列表后执行拖拽方法
        });
    },
    methods: {
        /* 获取列表 */
        async getList() {
            const { code, msg, data } = await this.$axios.get(Api.getList, {
                params: {
                    page: this.table.currentPage, //查询第几页
                    per_page: this.table.pageSize, //每页多少条数据
                },
            });

            if (code == 200) {
                this.table.list = data.list;

                // 关闭加载提示
                this.table.loading = false;
            }
        },

        onAddOrUpdate(id) {
            this.table.rowId = id;
            this.$refs.addOrUpdate.visible = true; // 弹窗开关
        },

        /* 显示、隐藏 */
        async onColumnDisplay(row) {
            const { code, data, msg } = await this.$axios.post(Api.update, {
                id: row.id,
                display: row.display,
            });

            if (code == 200) {
                if (code === 200) {
                    this.$msg.success(row.display ? "成功显示" : "隐藏成功");
                    this.getList();
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },

        /* 排序 */
        async onUpdateSort() {
            const sortList = this.table.list.map((item, index) => ({
                id: item.id,
                sort:
                    index + (this.table.currentPage - 1) * this.table.pageSize,
            }));

            const { code, msg, data } = await this.$axios.post(
                Api.onUpdateSort,
                {
                    sortList: JSON.stringify(sortList),
                }
            );

            if (code == 200) {
                this.$msg.success(msg);

                this.getList();
            } else {
                this.$msg.error(msg ? msg : data);
            }
        },
    },
};
</script>